<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/highcharts.js}"></script>

</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>数据统计</li>
        <li>客户销量统计</li>
        <li>基本内容</li>
    </ul>
</div>
<div class="rightinfo">
    <form action="/erp1/statis/custom/allcustomstatis" method="post" id="customstatisform">
        <input type="hidden" name="pageno" id="pageno" value=""/>
        <ul class="tools">
            <li> 所属区域：
                <select name="pid" onchange="getCity(this.value)">
                    <option value="0">请选择省份</option>
                    <option th:each="p : ${session.provinces}" th:value="${p.id}" th:text="${p.pName}"
                            th:selected="${p.id==customStatis.pid}">
                    </option>
                </select>
                <select name="cid">
                    <option name="0">请选择城市</option>
                </select>
            </li>
            <li> 客户姓名:
                <input type="text" name="customname" th:value="${customStatis.customname}"/>
            </li>

            <li class="subBut" onclick="goPage(1)"><img th:src="@{/images/t06.png}"/>查询</li>
        </ul>
        <table class="tablelist">
            <thead>
            <tr>
                <th>序号</th>
                <th>客户姓名</th>
                <th>所属区域</th>
                <th>订购单数量</th>
                <th>金额</th>
                <th>订购单明细</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="c,var : ${customstatisinfo.list}">
                <td th:text="${var.count+(customstatisinfo.pageNum-1)*customstatisinfo.pageSize}"></td>
                <td th:text="${c.customname}"></td>
                <td th:text="${c.province.pName+c.city.cName}"></td>
                <td th:text="${c.amount}"></td>
                <td th:text="${'￥'+c.total}"></td>
                <td>
                    <a th:href="'/erp1/statis/custom/customview?id='+${c.id}" class="tablelink">查看详情</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagin">
            <div class="message">共<i class="blue" th:text="${customstatisinfo.total}"></i>条记录，当前显示第&nbsp;<i class="blue"
                                                                                                            th:text="${customstatisinfo.pageNum+'&nbsp;'}">2</i>页
            </div>
            <ul class="paginList">
                <li class="paginItem">
                    <a href="javascript:void(0);"
                       th:onclick="goPage([[${customstatisinfo.isFirstPage?1:customstatisinfo.pageNum-1}]])">
                        <span th:class="${customstatisinfo.isFirstPage?'pagepre':'pagenxt roate'}"></span>
                    </a>
                </li>
                <li th:class="${page==customstatisinfo.pageNum?'paginItem current':'paginItem'}"
                    th:each="page : ${customstatisinfo.navigatepageNums}">
                    <a href="javascript:;" th:text="${page}" th:onclick="goPage([[${page}]])">1</a>
                </li>
                <li class="paginItem">
                    <a href="javascript:void(0);"
                       th:onclick="goPage([[${customstatisinfo.isLastPage?customstatisinfo.pages:customstatisinfo.pageNum+1}]])">
                        <span th:class="${customstatisinfo.isLastPage?'pagepre roate':'pagenxt'}"></span>
                    </a>
                </li>
            </ul>
        </div>
        </br>
        <div id="container" style="min-width:400px;height:400px"></div>
    </form>
</div>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script th:inline="javascript">

    $('.tablelist tbody tr:odd').addClass('odd');
    $(function () {
        var num = $("select[name=pid]").val();
        getCity(num);
        bingzhuang();

    });

    function goPage(num) {
        $("#pageno").val(num);
        $("#customstatisform").submit();
    }

    function getCity(num) {
        $.get("/erp1/ajaxCity", {"pid": num}, function (data) {
            $("select[name=cid]").html("");
            var options = "<option value=''>请选择城市</option>"
            var c = [[${customStatis.cid}]];
            $.each(data, function (i, e) {
                if (c == e.id) {
                    options += "<option value='" + e.id + "' selected='selected'>" + e.cname + "</option>";
                } else {
                    options += "<option value='" + e.id + "'>" + e.cname + "</option>";
                }
            });
            $("select[name=cid]").append(options);
        }, "json");
    }




    function bingzhuang() {
        $.ajax({
            url: "/erp1/statis/custom/bingzhuang",
            type: "get",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            async: "false",
            success: function (data) {
                var arr = new Array();
                $.each(data, function (i, e) {
                    arr[i] = new Array();
                    for (var j = 0; j < 2; j++) {
                        arr[i][0] = e.customname;
                        arr[i][1] = e.total;
                    }
                });
                //图片
                var chart = {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                };
                var title = {
                    text: '2019-2020 年客户销售额比例'
                };
                var tooltip = {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                };
                var plotOptions = {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                };
                var series = [{
                    type: 'pie',
                    name: '百分比',
                    data: arr
                }];

                var json = {};
                json.chart = chart;
                json.title = title;
                json.tooltip = tooltip;
                json.series = series;
                json.plotOptions = plotOptions;
                $('#container').highcharts(json);

            }//success结束
        });
    }
</script>
<input type="text" id="data"/>
</body>
</html>
